<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>贝塞尔</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">画出贝塞尔曲线</button>
<br>
<br>

</body>

<script>


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height

    const generateGround = () => {
        const img = document.createElement('img');
        img.src = './IMG.JPG';
        img.onload = () => {
            ctx.beginPath();
            //从左上角100,100开始画
            // ctx.drawImage(img, 100, 100);
            //从左上角100,100开始画，画的宽度200，高度300
            // ctx.drawImage(img, 100, 100, 200, 300);

            //裁切图片，
            ctx.drawImage(img, 1294, 1044, 100, 100,100,100,100,100);
            ctx.closePath();
        }
    }
    const generateGround2 = () => {
        const img = document.createElement('img');
        img.src = './bike.png';
        img.onload = () => {
            let idx = 0, picNum = 32;
            //制作动画
            setInterval(()=>{
                ctx.beginPath();
                //清空整个画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 130 * idx, 130, 130, 100, 100, 130, 130);
                ctx.closePath();
                idx = (idx + 1) % picNum;
            },30)

        }
    }
    const button = document.getElementById('bt');
    button.addEventListener('click', generateGround2);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>